<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<h:head>
    <title>Pilots</title>
    <style type="text/css">
        body {
            font: 75%/120% Arial, Helvetica, sans-serif;
            background-color: #12ffb7;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</h:head>
<h:body>

    <h:form >
        <div class="block">
            <h:outputText value="Last Name:"></h:outputText><br/>
            <h:inputText value="#{pilotServiceImpl.lastName}"></h:inputText>
        </div>

        <div class="block">
            <h:outputText value="First Name:"></h:outputText><br/>
            <h:inputText value="#{pilotServiceImpl.firstName}"></h:inputText>
        </div>

        <br/>

        <div class="blockCenter">
            <h:outputText value="Middle Name:"></h:outputText><br/>
            <h:inputText value="#{pilotServiceImpl.middleName}"></h:inputText>
        </div>

        <br/><br/>

        <div class="buttons">
            <h:commandButton action="#{pilotServiceImpl.addPilot}" value="Save pilot"></h:commandButton>
            <h:commandButton action="#{pilotServiceImpl.listPilot}" value="Update table"></h:commandButton>
        </div>
    </h:form>

    <h:dataTable value="#{pilotServiceImpl.pilots}" var="item" border="2" class = "block">
        <f:facet name="header">
            <h:outputText value="Pilots" />
        </f:facet>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Id" />
            </f:facet>
            <h:outputText value="#{item.id}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Last Name" />
            </f:facet>
            <h:outputText value="#{item.lastName}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="First Name" />
            </f:facet>
            <h:outputText value="#{item.firstName}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Middle Name" />
            </f:facet>
            <h:outputText value="#{item.middleName}"/>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Command" />
            </f:facet>
            <h:form>
            <h:commandButton value="Remove" action="#{pilotServiceImpl.removePilot}">
                <f:param name="pilotId" value="#{item.id}"/>
            </h:commandButton>
            </h:form>
        </h:column>
    </h:dataTable>

    <div class="blockCenter">
    <h:form>
        <h:commandButton action="back" value="Back"/>
    </h:form>
    </div>

</h:body>
</html>